<template>
	<view class="page-course">
		<MxCourseItem class="cmp-course-item" v-for="item in courses" :info="item" />
		<EmptyData v-if="!hasCourse" />
		<hans-tabbar :list="tabBarList" style="position:fixed;bottom:0;width:100%;left:0;right:0;" @tabChange="tabChange" :current="tabCurrent" />
	</view>
</template>

<script> 

	import MxCourseItem from '@/components/course/MxCourseItem.vue'
	import EmptyData from '@/components/common/EmptyData.vue'
	import * as courseApi from '@/api/course.js'
	import baseMixin from '@/common/mixins/base.js'
	
	export default {
		mixins: [baseMixin],
		components: {
			MxCourseItem,
			EmptyData
		},
		data() {
			return {
				 courses:[], 
			};
		},
		computed: {
			hasCourse() {
				return this.courses.length !== 0 
			}
		},
		onShow() {
			// 获取所有课程列表
			courseApi.list().then(res => {
				console.log(res)
				this.courses = res.data
			})
		}
	}
</script>

<style scoped lang="scss">
.page-course{
	padding: 54rpx 44rpx 0 20rpx;
	.cmp-course-item{
		display: flex;
		margin-bottom: 60rpx;
	}
}
</style>
